<template>
  <!--选项和组件的联动设置-->
  <el-table :data="arrItem" style="width: 100%" height="650" >
    <el-table-column type="expand">
      <template #default="props">
        <item-opt
          :column-id="props.row.columnId"
          :form-meta="formMeta"
        >
        </item-opt>
      </template>
    </el-table-column>
    <el-table-column label="字段" prop="colName" />
    <el-table-column label="名称" prop="label" />
    <el-table-column label="联动" >
      <template #default="scope">
        <span style="margin-left: 10px">
          {{ (formMeta.formColShow[scope.row.columnId]) ? "有":"-" }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  import { reactive, watch } from 'vue'

  import itemOpt from './form-option-comp-item.vue'

</script>

<script setup>

  const props = defineProps({
    formMeta: [Object]
  })

  const formMeta = props.formMeta
  const itemMeta = props.formMeta.itemMeta
 
  const arrItem = reactive([])

  watch(formMeta.itemMeta, () => {
    arrItem.length = 0
    for (const key in formMeta.itemMeta) {
      const item = formMeta.itemMeta[key]
      arrItem.push(item)
    }
  }, {immediate: true})

</script>